<div class="box"> 
  <div class="title">
    <h5><?php echo lang('text_heading_title_kabupaten_list') ?></h5>
  </div>
  
  <table class="table table-condensed table-striped table-hover table-bordered pull-left" id="records">                        
  <thead>
  <tr>
    <th style="width:10%">ID</th>
    <th style="width:15%">Nama</th>
    <th style="width:16%">Parent ID</th>
    <th style="width:16%">Action</th>
  </tr>
  </thead>
  <tbody></tbody>
  </table>
</div>

<script type="text/template" id="tplKabupaten">
  <tr id="${kabupaten_id}">
    <td>${kabupaten_id}</td>
    <td>${descr}</td>
    <td>${propinsi_id}</td>
    <td width="110px"><a class="updateBtn" href="{updateLink}">Edit</a> | <a class="deleteBtn" href="{deleteLink}">Delete</a></td>
  </tr>
</script>

<script>
$.ajax({
  url: '<?php echo site_url('/referensi/wilayah/kabupaten') ?>',
  data: { cmd: 'GET_KABUPATEN' },
  dataType: 'json',
  success: function( response ) {
    var j=1;
    for( var i in response ) {
      response[ i ].nomor = j;
      j++;
    }
    //clear old rows
    $( '#records > tbody' ).html( '' );
    
    //append new rows
    $('#tplKabupaten').render( response ).appendTo( "#records > tbody" );
    
    //apply dataTable to #records table and save its object in dataTable variable
    if( typeof dataTable == 'undefined' )
      dataTable = $( '#records' ).dataTable({"bJQueryUI": true});
    
    //hide ajax loader animation here...
    //$( '#ajaxLoadAni' ).fadeOut( 'slow' );
  }
});
</script>